<template>
  <div class="ticket-view">
    <!-- 顶部导航栏 -->
    <van-nav-bar
        title="保洁工单"
        left-arrow
        @click-left="onBack"
        fixed
    />
    <!-- 筛选菜单 -->
    <div class="filter-container">
      <van-dropdown-menu>
        <van-dropdown-item
            title="时间"
            v-model="value1"
            :options="option1"
            @change="sqsj"
        />
        <van-dropdown-item
            title="优先级"
            v-model="value2"
            :options="option2"
            @change="yxj"
        />
        <van-dropdown-item
            title="工单类别"
            v-model="value3"
            :options="option3"
            @change="gdlx"
        />
        <van-dropdown-item
            title="全部"
            :options="option4"
            @change="list"
        />
      </van-dropdown-menu>
    </div>

    <!-- 工单列表 -->
    <div class="ticket-list">
      <div v-for="ticket in data" :key="data.id" class="ticket-item">
        <div class="ticket-header">
          <div class="ticket-id">编号：{{ ticket.code }}</div>
          <!--          标签状态右对齐-->
          <div class="ticket-status">
            <van-tag v-if="ticket.yid === 1" type="success">普通</van-tag>
            <van-tag v-if="ticket.yid === 2" type="warning">紧急</van-tag>
            <van-tag v-if="ticket.yid === 3" type="danger">特级</van-tag>
          </div>
        </div>
        <div class="ticket-content">
          <div class="ticket-info">
            <div class="ticket-header">工单类别:<span v-if="ticket.type==1">保洁任务</span> <span v-if="ticket.type==2">维修任务</span>
              <span v-if="ticket.type==3">清洁任务</span></div>
            <div class="ticket-id">开始时间：{{ ticket.gdtime }}</div>
          </div>
          <!--          <div class="ticket-actions">-->
          <!--            <van-button v-if="ticket.gdzt==1" square type="primary" size="small" @click="xq(ticket.id)">详情</van-button>-->
          <!--          </div>-->
          <div class="ticket-actions">
            <van-button v-if="ticket.gdzt==1" square type="primary" size="small" @click="xq(ticket.id)">未派单
            </van-button>
            <van-button v-if="ticket.gdzt==2" square type="primary" size="small" @click="xq(ticket.id)">已完成
            </van-button>
            <van-button v-if="ticket.gdzt==3" square type="primary" size="small" @click="xq(ticket.id)">已挂单
            </van-button>
            <van-button v-if="ticket.gdzt==4" square type="primary" size="small" @click="xq(ticket.id)">已退回
            </van-button>
            <van-button v-if="ticket.gdzt==5" square type="primary" size="small" @click="xq(ticket.id)">已确认
            </van-button>
            <van-button v-if="ticket.gdzt==6" square type="primary" size="small" @click="xq(ticket.id)">已关闭
            </van-button>
            <van-button v-if="ticket.gdzt==7" square type="primary" size="small" @click="xq(ticket.id)">已响应
            </van-button>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
import {Button, Cell, DropdownItem, DropdownMenu, NavBar, Tag} from "vant";

export default {
  data() {
    return {
      activeName: null,
      data: [],
      value1: 0,
      value2: 0,
      value3: 0,
      names: '',
      // value2: 'a',
      option1: [
        {text: '今日', value: 1},
        {text: '昨天', value: 2},
        {text: '两天前', value: 3},
      ],
      option2: [
        {text: '普通', value: 1},
        {text: '紧急', value: 2},
        {text: '特级', value: 3},
      ],
      option3: [
        {text: '保洁工单', value: 1},
        {text: '维修工单', value: 2},
        {text: '清洁工单', value: 3},
      ],
      option4: [
        {text: '全部', value: 1},
      ],
      pid1: 0
    };
  },
  created() {
    this.userhq();
    this.list();
  },
  methods: {

    userhq() {
      const item = localStorage.getItem('aa');

      const aaaa = JSON.parse(item)
      console.log(aaaa);
      let name = aaaa['username'];
      let phone = aaaa['phone'];
      this.pid1 = aaaa['pid'];
      this.names = name;
    },

    onBack() {
      this.$router.push('/medical');
    },

    xq(val) {
      this.$router.push({path: '/workorderbjxq', query: {id: val}});
    },


    sqsj(val) {
      if (this.pid1 == 1) {
        this.axios.post(`http://localhost:9999/api-cleaning-service/Workorder/listtime?times=` + val).then(res => {
          this.data = res.data.data;
          console.log(this.data);
        })
      }

      if (this.pid1 == 2) {
        console.log(val)
        this.axios.post(`http://localhost:9999/api-cleaning-service/Workorder/listtimes?times=${val}&worker=${this.names}`).then(res => {
          this.data = res.data.data;
          console.log(this.data);
        })
      }

      if (this.pid1 == 3) {
        this.axios.post(`http://localhost:9999/api-cleaning-service/Workorder/listtimess?times=${val}&name=${this.names}`).then(res => {
          this.data = res.data.data;
          console.log(this.data);
        })
      }
    },
    yxj(val) {
      if (this.pid1 == 1){
        this.axios.post(`http://localhost:9999/api-cleaning-service/Workorder/listyxj?yid=` + val).then(res => {
          this.data = res.data.data;
          console.log(this.data);
        })
      }
      if (this.pid1 == 2){
        this.axios.post(`http://localhost:9999/api-cleaning-service/Workorder/listyxjs?yid=${val}&worker=${this.names}`).then(res => {
          this.data = res.data.data;
          console.log(this.data);
        })
      }
      if (this.pid1 == 3){
        this.axios.post(`http://localhost:9999/api-cleaning-service/Workorder/listyxjss?yid=${val}&name=${this.names}`).then(res => {
          this.data = res.data.data;
          console.log(this.data);
        })
      }
    },
    gdlx(val) {
      if (this.pid1 == 1){
        this.axios.post(`http://localhost:9999/api-cleaning-service/Workorder/listgdlx?type=`+ val).then(res => {
          this.data = res.data.data;
          console.log(this.data);
        })
      }
      if (this.pid1 == 2){
        this.axios.post(`http://localhost:9999/api-cleaning-service/Workorder/listgdlxs?type=${val}&worker=${this.names}`).then(res => {
          this.data = res.data.data;
          console.log(this.data);
        })
      }
      if (this.pid1 == 3){
        this.axios.post(`http://localhost:9999/api-cleaning-service/Workorder/listgdlxss?type=${val}&name=${this.names}`).then(res => {
          this.data = res.data.data;
          console.log(this.data);
        })
      }
    },
    sy() {
      this.$router.push('/')
    },
    list() {
      if (this.pid1 == 1) {
        // console.log(this.p)
        this.axios.post(`http://localhost:9999/api-cleaning-service/Workorder/list`).then(res => {
          this.data = res.data.data;
          console.log(this.data);
        })
      }
      if (this.pid1 == 2) {
        this.axios.post(`http://localhost:9999/api-cleaning-service/Workorder/list2?worker=` + this.names).then(res => {
          this.data = res.data.data;
          console.log(this.data);
        })
      }
      if (this.pid1 == 3) {
        this.axios.post(`http://localhost:9999/api-cleaning-service/Workorder/listname?name=` + this.names).then(res => {
          this.data = res.data.data;
          console.log(this.data)
        })
      }
    }
  },
  components: {
    [NavBar.name]: NavBar,
    [DropdownMenu.name]: DropdownMenu,
    [DropdownItem.name]: DropdownItem,
    [Cell.name]: Cell,
    [Tag.name]: Tag,
    [Button.name]: Button,
  },

}
</script>


<style scoped>

.ticket-view {
  min-height: 100vh;
  background-color: #f7f8fa;
  padding-top: 46px;
  top: 30px;
}

.filter-container {
  position: sticky;
  top: 46px;
  z-index: 10;
}

:deep(.van-dropdown-menu) {
  background-color: #fff;
}

.ticket-list {
  padding: 12px;
}

.ticket-item {
  background-color: #fff;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.ticket-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid #ebedf0;
}

.ticket-id {
  font-size: 14px;
  color: #323233;
}

.ticket-priority {
  font-size: 14px;
  font-weight: 500;
}

.ticket-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ticket-info {
  font-size: 13px;
  color: #646566;
  line-height: 1.5;
}

:deep(.van-button--primary) {
  background-color: #1989fa;
  border-color: #1989fa;
}

:deep(.van-button--success) {
  background-color: #07c160;
  border-color: #07c160;
}

</style>